<!--订单明细-->
<template>
  <div class="Details">
    <mt-header fixed title="订单明细">
      <router-link to slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div v-for="(item, index) in orderDtail" :key="index">
      <div class="Details_top">
        <img src="../../../static/image/currentduan.png" />
      </div>
      <div class="Details_nav">
        <div class="Details_logo" v-if="item.headImgUrl == null">
          <img src="../../../static/image/me.png" />
        </div>
        <div class="Details_logo" v-else>
          <img :src="item.headImgUrl" />
        </div>
        <div class="Details_txt">{{ item.payUserName }}</div>
        <div class="Details_money">￥{{ item.branchProfit / 100 }}</div>
      </div>

      <div class="Details_list">
        <div class="Details_list_oitem">
          <div class="Details_list_left">标价</div>
          <div class="Details_list_right">￥{{ item.price / 100 }}</div>
        </div>
        <div class="Details_list_oitem">
          <div class="Details_list_left">佣金</div>
          <div class="Details_list_right">
            ￥{{ (item.directPrice + item.indirectPrice) / 100 }}
          </div>
        </div>

        <div class="Details_list_oitem">
          <div class="Details_list_left">商品名称</div>
          <div class="Details_list_right">{{ item.goodsName }}</div>
        </div>

        <div class="Details_list_oitem">
          <div class="Details_list_left">分院</div>
          <div class="Details_list_right">{{ item.branchName }}</div>
        </div>

        <div class="Details_list_oitem">
          <div class="Details_list_left">上级业务员</div>
          <div class="Details_list_right">
            <div v-if="item.directName">{{ item.directName }}</div>
            <div v-if="item.indirectName !== null">{{ item.indirectName }}</div>
          </div>
        </div>

        <div class="Details_list_oitem">
          <div class="Details_list_left">支付时间</div>
          <div class="Details_list_right">{{ item.payTime }}</div>
        </div>

        <div class="Details_list_oitem">
          <div class="Details_list_left">交易单号</div>
          <div class="Details_list_right">{{ item.transactionId }}</div>
        </div>

        <div class="Details_list_oitem">
          <div class="Details_list_left">商户单号</div>
          <div class="Details_list_right">{{ item.orderId }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Detailorder } from "../../api/api";
import querystring from "query-string";
import { Header, Indicator, Toast } from "mint-ui";

export default {
  name: "Details",
  data() {
    return {
      orderId: "",
      orderDtail: [],
      iosShow: false
    };
  },
  created() {
    this.orderId = this.$route.query.orderId;
    this.Phonetype();
  },
  methods: {
    Detailorder() {
      Indicator.open("加载中...");
      var params = {
        orderId: this.orderId,
        type: 1
      };
      console.log(params);
      var params = querystring.stringify(params);
      console.log(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Detailorder(params, a).then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          var orderDtail = res.data.data;
          var num = [];
          num.push(orderDtail);
          this.orderDtail = num;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      console.log(ua); //Ios终端
      //Android终端
      //let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
      // console.log(isAndroid)
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    }
  },
  mounted() {
    this.Detailorder();
  }
};
</script>
<style lang="scss" scoped>
/* 订单明细 */
.mint-header {
  background: #ffffff;
  color: #333333;
}
.Details {
  width: 100%;
  height: auto;
  padding-top: 40px;
}

.Details_top {
  width: 100%;
  height: 1.7rem;
}

.Details_top img {
  width: 100%;
  height: 100%;
  display: block;
}

.Details_nav {
  width: 100%;
  height: 3.88rem;
  margin-top: 0.31rem;
  text-align: center;
  border-bottom: 0.1rem solid #f8f9fe;
}

.Details_logo {
  width: 2.06rem;
  height: 2.06rem;
  border-radius: 50%;
  margin: auto;
  overflow: hidden;
}

.Details_logo img {
  width: 2.06rem;
  height: 2.06rem;
}

.Details_txt {
  color: #212c67;
  margin-top: 0.25rem;
  font-size: 0.32rem;
}

.Details_money {
  font-size: 0.3rem;
  color: #ffb400;
  margin-top: 0.17rem;
}

.Details_list {
  width: 100%;
  height: auto;
}

.Details_list_oitem {
  width: 100%;
  height: auto;
  min-height: 0.9rem;
  display: flex;
  border-bottom: 0.02rem solid #eee;
  align-items: center;
  font-size: 0.28rem;
}

.Details_list_left {
  width: 30%;
  margin-left: 0.8rem;
  color: #666666;
}

.Details_list_right {
  width: 60%;
  color: #666666;
  margin-left: 0.1rem;
}
</style>
